<ion-header>
  <ion-navbar>
    <ion-title class="bp-title">{{ title }}</ion-title>
    <ion-buttons end>
      <button ion-button (click)="import()" [disabled]="!importForm.valid">
        <span translate>Import</span>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content no-bounce>
  <div [attr.padding]="isIOS ? '' : null">
    <ion-segment [(ngModel)]="selectedTab" color="primary" (ionChange)="selectTab(selectedTab)">
      <ion-segment-button value="words">
        {{ 'Recovery Phrase' | translate }}
      </ion-segment-button>
      <ion-segment-button value="file">
        {{ 'File/Text' | translate }}
      </ion-segment-button>
    </ion-segment>
  </div>

  <form [formGroup]="importForm">
    <ion-item *ngIf="selectedTab == 'words'">
      <ion-label stacked>{{'Type the recovery phrase' | translate}}</ion-label>
      <ion-textarea formControlName="words" [value]="importForm.value.words" autocapitalize="none">
      </ion-textarea>
      <ion-icon class="scanner-icon" name="qr-scanner" item-right (click)="openScanner()"></ion-icon>
    </ion-item>


    <label-tip *ngIf="selectedTab == 'words'" type="info" header="no-header" class="no-arrowhead">
      <div label-tip-body translate>Enter your recovery phrase (usually 12-words) in the correct order. Separate each word with a single space only (no commas or any other punctuation). For backup phrases in non-English languages: Some words may include special symbols (ñ, è, っ, etc.), so be sure to spell all the words correctly. </div>
    </label-tip>

    <div *ngIf="selectedTab == 'file'">
      <ion-item class="hide-validation" *ngIf="!isSafari && !isCordova">
        <ion-input class="upload-hidden" type="file" accept="json" [(ngModel)]="formFile" (change)="fileChangeEvent($event)" formControlName="file"></ion-input>
        <div item-content class="upload-ui">
          <div class="empty-message">{{'Choose a backup file from your computer' | translate}}&hellip;</div>
          <div class="filled-message">{{prettyFileName}}</div>
        </div>
      </ion-item>

      <ion-item *ngIf="isSafari || isCordova">
        <ion-label floating>{{'Paste the backup plain text code' | translate}}</ion-label>
        <ion-textarea formControlName="backupText" rows="7" [value]="importForm.value.backupText"></ion-textarea>
      </ion-item>

      <ion-item>
        <ion-label floating>{{'Password' | translate}}</ion-label>
        <ion-input type="password" formControlName="filePassword"></ion-input>
      </ion-item>
    </div>

    <button ion-button class="button-standard button-secondary" (click)="showAdvOpts = !showAdvOpts">
      <span *ngIf="!showAdvOpts">{{'Show advanced options' | translate}}</span>
      <span *ngIf="showAdvOpts">{{'Hide advanced options' | translate}}</span>
    </button>

    <div *ngIf="showAdvOpts" padding-bottom>
      <ion-item>
        <ion-label floating>Wallet Service URL</ion-label>
        <ion-input type="text" formControlName="bwsURL"></ion-input>
      </ion-item>

      <div *ngIf="selectedTab == 'words'">
        <ion-item>
          <ion-label>{{'Specify derivation path' | translate}}</ion-label>
          <ion-toggle formControlName="derivationPathEnabled" (ionChange)="changeDerivationPathValidators();"></ion-toggle>
        </ion-item>

        <ion-item *ngIf="importForm.value.derivationPathEnabled">
          <ion-label floating>{{'Coin' | translate}}</ion-label>
          <ion-select okText="{{okText}}" cancelText="{{cancelText}}" formControlName="coin" (ionChange)="setDerivationPath($event)">
            <div *ngFor="let coin of availableCoins">
              <ion-option value="{{coin}}"> {{ getCoinName(coin) }} ({{ coin.toUpperCase() }})</ion-option>
            </div>
          </ion-select>
        </ion-item>

        <ion-item *ngIf="importForm.value.derivationPathEnabled">
          <ion-label floating>{{'Derivation path' | translate}}</ion-label>
          <ion-input type="text" formControlName="derivationPath" [value]="importForm.value.derivationPath"></ion-input>
        </ion-item>

        <ion-item *ngIf="importForm.value.derivationPathEnabled && importForm.value.derivationPath === this.derivationPathHelperProvider.defaultBTC">
          <ion-label>{{'Shared Wallet' | translate}}</ion-label>
          <ion-checkbox formControlName="isMultisig"></ion-checkbox>
        </ion-item>

        <ion-item class="with-label">
          <ion-label floating>{{'Password' | translate}}</ion-label>
          <ion-input type="password" formControlName="passphrase"></ion-input>
        </ion-item>

        <label-tip type="info" header="no-header">
          <div label-tip-body translate>
            This field is only for users who, in previous versions (it's not supported anymore), set a password to protect their recovery phrase. This field is not for your encrypt password.
          </div>
        </label-tip>
      </div>

    </div>
  </form>
</ion-content>